<template>
  <el-dialog
    :close-on-click-modal="false"
    title="事件详情"
    :visible.sync="dialogVisible"
    height="440px"
    width="800px"
    class="re-dialog"
  >
    <div class="taaept-box">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="事件名称：" :label-width="formLabelWidth" prop="eventName">
          <el-input readonly placeholder="请输入名称" v-model="ruleForm.eventName"></el-input>
        </el-form-item>
        <el-form-item label="事件地点：" :label-width="formLabelWidth" prop="eventAddress">
          <el-input readonly placeholder="请输入地点" v-model="ruleForm.eventAddress"></el-input>
        </el-form-item>
        <el-form-item label="事件来源：" :label-width="formLabelWidth">{{record.eventSourceName||'-'}}</el-form-item>
        <el-form-item label="上报时间：" :label-width="formLabelWidth">{{getTimeStr(record.createTime) || ""}}</el-form-item>
        <el-form-item label="事件描述：" :label-width="formLabelWidth" prop="eventDetail">
          <el-input readonly type="textarea" placeholder="请输入描述" v-model="ruleForm.eventDetail"></el-input>
        </el-form-item>
        <el-form-item label="处理意见：" :label-width="formLabelWidth" prop="opinion">
          <el-input type="textarea" placeholder="请输入意见" v-model="ruleForm.opinion" :maxlength="100"></el-input>
        </el-form-item>
        <el-form-item 
            v-if = "record.eventStatus==3 && (btnType=='all'||btnType==2)"
            label="图片：" :label-width="formLabelWidth" prop="pic">
            <el-upload
                :action="uploadUrl+'/xzsp/sysAttrFile/upload'"
                :limit="10"
                :headers = "headers"
                list-type="picture-card"
                :on-success="onUploadSuccess"
                :on-remove="handleRemove"
                :before-upload="onBeforeUpload"
                :file-list="fileList"
            >

                <i slot="default" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
      </el-form>
      <div class="time-line-parent">
        <Timeline :list="record.eventFlowData" :title="record.eventName"/>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        v-if="btnType=='all'||btnType==1"
        type="primary"
        @click="submitForm('ruleForm',1)"
        size="small"
        :disabled="record.eventStatus!=2"
      >接 收</el-button>
      <el-button
        v-if="btnType=='all'||btnType==2"
        type="primary"
        @click="submitForm('ruleForm',2)"
        style="background-color:#2b88ff; border-color:transparent"
        size="small"
        :disabled="record.eventStatus!=3"
      >反 馈</el-button>
      <el-button
        v-if="btnType=='all'||btnType==3"
        type="success"
        @click="submitForm('ruleForm',3)"
        size="small"
        style="background-color:#1cca82; border-color:transparent"
        :disabled="record.eventStatus!=3"
      >完 成</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import {getTimeStr} from "../../utils/index";
import { getCookie,uploadUrl } from "../../utils";


import Timeline from "../common/Timeline";
import {sortingEventinfoReceive,sortingEventinfoFeedback,findByDictCode,sortingEventinfoFinish} from "../../config/api";
export default {
  components: {
    Timeline
  },
  props: {
    // list: Array
  },
  data() {
      let token = getCookie("token");
    return {
        uploadUrl,  
        headers: { token },
      record: {},
      fileList:[],
      btnType: 'all',
      formLabelWidth: "90px",
      dialogVisible: false,
      getTimeStr,
      ruleForm: {
        eventName: "",
        eventAddress: "",
        eventDetail: "",
        opinion: ""
      },
      rules: {
        opinion: [
          {
            required: true,
            message: "请输入处理意见",
            trigger: "blur"
          }
        ]
      },
      activities: [
        {
          content: "一阶段",
          timestamp: "2018-04-12 20:46",
          // size: 'large',
          type: "primary",
          icon: "el-icon-time"
        },
        {
          content: "二阶段",
          timestamp: "2018-04-03 20:46"
        },
        {
          content: "支持自定义尺寸",
          timestamp: "2018-04-03 20:46"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03 20:46"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03 20:46"
        }
      ],
      sourceCodeList:[],
    };
  },
  mounted() {
    this.pubsub_token = Pubsub.subscribe("ProcessingDialog", (type, values) => {
      if(values.item){
        this.ruleForm={
          eventName: values.item.eventName,
          eventAddress: values.item.eventName,
          eventDetail: values.item.eventDetail,
          opinion: values.item.opinion
        }; //重置
      this.dialogVisible = true;
      this.record = values.item || {};
      this.btnType = values.btnType || 'all';
      }else{
        this.ruleForm={};
        setTimeout(() => {
          this.$refs.ruleForm.clearValidate(); //重置
        }, 0);
      }
    });
    // this.getDictCode();
  },
  destroyed() {
    this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
  },
  methods: {
      onBeforeUpload(e){
          if(e.type.indexOf("image")===-1){
              this.$message.warning("请上传正确格式的图片");
              return false
          }
          return true;
      },
      handleRemove(file,fileList){
          this.fileList = fileList;
      },
      onUploadSuccess(response,file,fileList) {
            let { code, data = {} } = response;
            if (code == 200) {
                this.fileList = fileList;
            }
        },
    /**
     * 获取数据字典--取件类型
     */
    // getDictCode() {
    //   //事件来源数据字典
    //   findByDictCode({ dictCode: "sortingEventSourceCode" }).then((res = {}) => {
    //     this.sourceCodeList=res.data || [];
    //   });
    // },
    // initsourceCode(code){
    //   return ((this.sourceCodeList.find(item=>item.dictDataCode==code))||{}).dictDataName||'-'
    // },
    submitForm(formName,type) {
      this.$refs[formName].validate((valid, values) => {
        if (valid) {
          const { record,ruleForm } = this;
          if(type==1){//接收
            sortingEventinfoReceive({ id: record.id, opinion: ruleForm.opinion }).then(res=>{
              this.$message({
                message: "接收成功",
                type: "success"
              });
              Pubsub.publish("SORT_CENTER_PRESS");//刷新我的督办
              Pubsub.publish("myBacklogList");//刷新我的待办列表
              Pubsub.publish("SORT_CENTER_TODO");//刷新控制台我的待办
              this.dialogVisible=false;
            });
          }else if(type==2){//反馈
            let fileIds = [];
            this.fileList.map((item)=>{
                if(item.response && item.response.code == 200){
                    fileIds.push(item.response.data.fileId);
                }
            })
            sortingEventinfoFeedback({fileIds, id: record.id, opinion: ruleForm.opinion }).then(res=>{
              this.$message({
                message: "反馈成功",
                type: "success"
              });
              Pubsub.publish("SORT_CENTER_PRESS");//刷新我的督办
              Pubsub.publish("myBacklogList");//刷新我的待办列表
              Pubsub.publish("SORT_CENTER_TODO");//刷新控制台我的待办
              this.dialogVisible=false;
            });
          }else{//完成
            sortingEventinfoFinish({ id: record.id, opinion: ruleForm.opinion }).then(res=>{
              this.$message({
                message: "操作成功",
                type: "success"
              });
              Pubsub.publish("SORT_CENTER_PRESS");//刷新我的督办
              Pubsub.publish("myBacklogList");//刷新我的待办列表
              Pubsub.publish("SORT_CENTER_TODO");//刷新控制台我的待办
              this.dialogVisible=false;
            });
          }
        }
      });
    }
  }
};
</script>

<style lang = "scss" scoped>
.taaept-box {
  display: flex;
  flex-direction: row;
   /* max-height: 70vh; */
  /* overflow-y: auto; */
  > * {
    flex: 1;
    padding-left: 20px;
  }
}
.dialog-footer {
  margin-top: 0;
  button{
    &:disabled {
      background-color: #ccc !important;
      color: #fff;
      opacity: 1;
    }
  }
}
.time-line-parent{
  max-height: 70vh;
  overflow-y: auto;
}
</style>